/* 看板娘切换按钮css */
#waifu-toggle {
  width: 60px;
  font-size: 12px;
  color: #b689b0;
  background-color: #fff1ac;
  cursor: pointer;
  border-radius: 5px;
  margin-left: -100px;
  padding: 5px 2px 5px 0;
  position: fixed;
  bottom: 66px;
  writing-mode: vertical-rl; /*竖着书写*/
  transition: margin-left, font-size, padding-right 1.5s, 1.5s, 1.5s; /*动画效果*/
}

#waifu-toggle.waifu-toggle-active {
  margin-left: -50px;
}

#waifu-toggle.waifu-toggle-active:hover {
  font-size: 14px;
  margin-left: -40px;
  padding-right: 10px;
}

/* end 看板娘切换按钮css */

/* waifu css */
#waifu {
  position: fixed;
  bottom: -1000px;
  transform: translateY(7px);
  transition: transform .3s ease-in-out, bottom 3s ease-in-out;
  z-index: 1;
}

#waifu:hover {
  transform: translateY(3px);
}

/* end waifu css */

/* waifu>waifu-tips.css */
#waifu-tips {
  margin: 10px auto;
  background-color: #ecd9bc;
  border: 1px solid #e0ba8c;
  border-radius: 12px;
  box-shadow: 0 3px 15px 2px #bf9e76;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  opacity: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 1s;
  word-break: break-all;
  animation: shake 50s ease-in-out 5s infinite;
}

#waifu-tips.waifu-tips-active {
  opacity: 1;
  transition: opacity .2s;
}

#waifu-tips span {
  color: #e000c0;
}

/* end waifu>waifu-tips.css */

/* waifu>live2d.css */
#waifu #live2d {
  cursor: grab;
}

#waifu #live2d:active {
  cursor: grabbing;
}

/* end waifu>live2d.css */

/* waifu>waifu-tool.css */
#waifu-tool {
  color: #aaa;
  opacity: 0;
  position: absolute;
  right: -25px;
  top: 80px;
  transition: opacity 1s;
}

#waifu:hover #waifu-tool {
  opacity: 1;
}

#waifu-tool span {
  cursor: pointer;
  color: #5b6c7d;
  display: block;
  text-align: center;
  transition: color .3s;
}

#waifu-tool span:hover {
  color: #0684bd;
  /* #34495e */
}

/* end waifu>waifu-tool.css */

/*当页面小于 567px 组件消失*/
@media only screen and (max-width: 567px) {
  #waifu {
    display: none;
  }
}

/* 抖动动画定义 */
@keyframes shake {
  2% {
    transform: translate(.5px, -1.5px) rotate(-.5deg);
  }

  4% {
    transform: translate(.5px, 1.5px) rotate(1.5deg);
  }

  6% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg);
  }

  8% {
    transform: translate(2.5px, 1.5px) rotate(.5deg);
  }

  10% {
    transform: translate(.5px, 2.5px) rotate(.5deg);
  }

  12% {
    transform: translate(1.5px, 1.5px) rotate(.5deg);
  }

  14% {
    transform: translate(.5px, .5px) rotate(.5deg);
  }

  16% {
    transform: translate(-1.5px, -.5px) rotate(1.5deg);
  }

  18% {
    transform: translate(.5px, .5px) rotate(1.5deg);
  }

  20% {
    transform: translate(2.5px, 2.5px) rotate(1.5deg);
  }

  22% {
    transform: translate(.5px, -1.5px) rotate(1.5deg);
  }

  24% {
    transform: translate(-1.5px, 1.5px) rotate(-.5deg);
  }

  26% {
    transform: translate(1.5px, .5px) rotate(1.5deg);
  }

  28% {
    transform: translate(-.5px, -.5px) rotate(-.5deg);
  }

  30% {
    transform: translate(1.5px, -.5px) rotate(-.5deg);
  }

  32% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  34% {
    transform: translate(2.5px, 2.5px) rotate(-.5deg);
  }

  36% {
    transform: translate(.5px, -1.5px) rotate(.5deg);
  }

  38% {
    transform: translate(2.5px, -.5px) rotate(-.5deg);
  }

  40% {
    transform: translate(-.5px, 2.5px) rotate(.5deg);
  }

  42% {
    transform: translate(-1.5px, 2.5px) rotate(.5deg);
  }

  44% {
    transform: translate(-1.5px, 1.5px) rotate(.5deg);
  }

  46% {
    transform: translate(1.5px, -.5px) rotate(-.5deg);
  }

  48% {
    transform: translate(2.5px, -.5px) rotate(.5deg);
  }

  50% {
    transform: translate(-1.5px, 1.5px) rotate(.5deg);
  }

  52% {
    transform: translate(-.5px, 1.5px) rotate(.5deg);
  }

  54% {
    transform: translate(-1.5px, 1.5px) rotate(.5deg);
  }

  56% {
    transform: translate(.5px, 2.5px) rotate(1.5deg);
  }

  58% {
    transform: translate(2.5px, 2.5px) rotate(.5deg);
  }

  60% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  62% {
    transform: translate(-1.5px, .5px) rotate(1.5deg);
  }

  64% {
    transform: translate(-1.5px, 1.5px) rotate(1.5deg);
  }

  66% {
    transform: translate(.5px, 2.5px) rotate(1.5deg);
  }

  68% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  70% {
    transform: translate(2.5px, 2.5px) rotate(.5deg);
  }

  72% {
    transform: translate(-.5px, -1.5px) rotate(1.5deg);
  }

  74% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  76% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  78% {
    transform: translate(-1.5px, 2.5px) rotate(.5deg);
  }

  80% {
    transform: translate(-1.5px, .5px) rotate(-.5deg);
  }

  82% {
    transform: translate(-1.5px, .5px) rotate(-.5deg);
  }

  84% {
    transform: translate(-.5px, .5px) rotate(1.5deg);
  }

  86% {
    transform: translate(2.5px, 1.5px) rotate(.5deg);
  }

  88% {
    transform: translate(-1.5px, .5px) rotate(1.5deg);
  }

  90% {
    transform: translate(-1.5px, -.5px) rotate(-.5deg);
  }

  92% {
    transform: translate(-1.5px, -1.5px) rotate(1.5deg);
  }

  94% {
    transform: translate(.5px, .5px) rotate(-.5deg);
  }

  96% {
    transform: translate(2.5px, -.5px) rotate(-.5deg);
  }

  98% {
    transform: translate(-1.5px, -1.5px) rotate(-.5deg);
  }

  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

/*自定义字体与图标*/
@font-face {
  font-family: "FontAwesomeUI";
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
}

[class^="faui-"],
[class*="faui-"] {
  font-family: "FontAwesomeUI", serif;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.faui-home:before {
  content: "\f015";
}

.faui-msg:before {
  content: "\f075";
}

.faui-game:before {
  content: "\f1d8";
}

.faui-model:before {
  content: "\f007";
}

.faui-textures:before {
  content: "\f21d";
}

.faui-photo:before {
  content: "\f03e";
}

.faui-about:before {
  content: "\f129";
}

.faui-remove:before {
  content: "\f00d";
}
